<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>发布</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="/static/favicon.ico">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="/static/css/sm.min.css">
	<link rel="stylesheet" href="/static/css/sm-extend.min.css">

	<!--icon css-->
	<link rel="stylesheet" href="/static/css/icon-style.css">
	<style>
		.list-block ul:before {
			height: 0px;
		}
		.list-block ul:after{
			height: 0px;
		}
		.list-block .item-content{
			padding-right: .75rem;
		}
		img{
			width: 100%;
			height: 100%;
		}
		.row{
			margin: 0px !important;
			padding: 0.5rem 0 0.5rem 0;
		}
		.content{
			background: white;
		}
		input,textarea,.item-inner{
			font-size: 0.75rem!important;
		}
		.item-inner{
			margin: 0 !important;
		}
		.bar-tab:before {
			display: none;
		}
		.bar .button {
			top: 0;
		}
		.confirm-ok-cancel{
			color: gray;
		}
		.confirm-ok-cancel:active{
			color: gainsboro;
		}
		.tc{
			width: 100%;
			height: 0rem;
		}
		@media only screen and (min-width:400px){
			.tc{
				height: 3rem;
			}
		}

		/*img*/
		.box >.icon-cross:before {
			position: absolute;
			padding-left: 0.12rem;
			top:18%;
		}
		.bg{
			background: rgba(0,0,0,0.5) !important;
			color: white;
			font-size: 0.5rem;
			position: absolute !important;
			top: 0.3rem;
			right: 0.3rem;
			border-radius: 100%;
			width: 0.9rem;
			height: 0.9rem;
		}
		.bg:active{
			color: gray;
		}
		.col-25{
			position: relative;
			width: 25%;
			margin:5px !important;
			float: left;
		}
		.thumb-icon {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.img-add-icon {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		#img-file-input {
			display: none;
		}
		.box{
			position: relative;
			width: 22%;
			font-size: 0;
			padding: 0 0 22% 0;
			float: left;
			margin: 5px;
			border-radius: 10px;
		}
	</style>
</head>

<body>

<!--头部-->
<header class="bar bar-nav">
	<span class="icon icon-cross pull-left confirm-ok-cancel"></span>
	<h1 class="title">发布</h1>
</header>

<div class="content">
	<!--标题和内容-->
	<div class="list-block" style="margin: 0 0">
		<ul>
			<li class="item-content">
				<div class="item-inner">
					<input type="text" maxlength='25' name="title" placeholder="标题">
				</div>
			</li>
			<li class="item-content">
				<div class="item-inner">
					<textarea name="content"  maxlength='300' placeholder="描述宝贝转手的原因，入手渠道和使用感受" ></textarea>
				</div>
			</li>
		</ul>
	</div>

	<!--图片区-->

	<div class="row" id="ImgUpload"></div>

	<!--分割块-->
	<div class="fg"></div>
	<!--价格-->
	<div class="list-block" style="margin: 0 0">
		<ul>
			<li>
				<a href="#" data-popup=".popup-price" class="item-content item-link open-popup">
					<div class="item-media"><i class="icon icon-f7"></i></div>
					<div class="item-inner">
						<div class="item-title">价格</div>
						<div class="item-after"  id="price"></div>
					</div>
				</a>
			</li>
			<li>
				<a href="#" data-popup=".popup-type" class="item-content item-link open-popup">
					<div class="item-media"><i class="icon icon-f7"></i></div>
					<div class="item-inner">
						<div class="item-title">分类</div>
						<div class="item-after"  id="type"></div>
					</div>
				</a>
			</li>
		</ul>
	</div>

	<!-- 填充块-->
	<div class="tc"></div>

	<!-- 价格popup-->
	<div class="popup popup-price" style="top: 12rem">
		<div class="list-block" >
			<ul>
				<li class="item-content">
					<div class="item-inner">
						原价<input type="number" name="yj" id="yj" placeholder="￥0.00" style="width: 90%">
					</div>
				</li>
				<li class="item-content">
					<div class="item-inner">
						特价<input type="number" name="tj" id="tj" placeholder="￥0.00" style="width: 90%">
					</div>
				</li>
			</ul>
			<a href="#" class="close-popup button button-fill price" style="width: 90%;height: 2rem;line-height: 2rem;font-size: 1rem;margin-left:5%">确定</a>
		</div>
	</div>

	<!-- 分类popup-->
	<div class="popup popup-type" style="top: 12rem">
		<div class="content-block-title text-center">请选择商品类型</div>
		<div class="list-block" id="myType">
			<ul>

			</ul>
		</div>
	</div>

</div>
<nav class="bar bar-tab">
	<a href="#" class="button button-fill" id="submit" onclick="submit()" style="height: 100%;line-height: 2rem;font-size: 1rem">确认发布</a>
</nav>


<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>

<!--图片上传插件-->
<script type="text/javascript" src="/static/js/ImgUpload.js"></script>
<script type="text/javascript">
    var url =''; //装返回的url

	$(document).ready(function () {
	    //判断是否登录
        $.ajax({
            url: '/sys/user/getLoginInfo',
            type: 'post',
            dataType: 'json',
            success: function (re) {
                if (!re.status) {
					// 初始化分类
                    initType();
                } else {
                    $('.content').html('<p></p><p></p><p class="text-center">请先<a href="/page/loginUI">登录</a></p>');
                    $('nav').remove();
                    $.toast('请先登录后再发布商品');
                }
            }
        });
    });
    //			退出发布商品界面
    $(document).on('click', '.confirm-ok-cancel',function () {
        $.confirm('确定要退出吗',
            function () {
                window.history.go(-1);
            },
            function () {

            }
        );
    });

    //上传图片
    var options = {
        path: '/',
        onSuccess: function (res) {
            console.log(res);
        },
        onFailure: function (res) {
            console.log(res);
        }
    };
    //上传图片
    var upload = ImgUpload('#ImgUpload');

    //提交验证
    function submit() {
        if($('input[name=title]').val() ==  ''){
            $.toast("您的宝贝没有标题！");
        }else if($('textarea[name=content]').val() == ''){
            $.toast("请描述您的宝贝！");
        }else if(!($('#price').find('.item-title').length)){
            $.toast("您还没有输入价格！");
        }else if(!($('#type').find('.item-title').length)){
            $.toast("您还没有选择类型！");
        }else{
            //验证通过请求ajax
            var data = upload();
            var i = data.entries();//遍历formData
            while(item = i.next()){
                $.toast('正在上传图片...', 2345, 'success top');
                var data1 = new FormData();//装单个图片的对象
                if(item.done) break;
                data1.append("file",item.value[1]);
                uploadImg(data1);
            }

            setTimeout(function (){
                loadGood(url);
            },3000);
        }
    };

    function loadGood(url) {
        var title = $('input[name="title"]').val();
        var content = $('textarea[name="content"]').val();
        var price = $('#tj').text();
        var old_price = $('#yj').text();
        console.log(old_price);
        var type = $('#type').children('div').attr('id');
        $.ajax({
            type: 'post',
            url: '/sys/good/updateOrSave',
            dataType: 'json',
            data: {
                name:title,
                detail:content,
                old_price:old_price,
                price:price,
                categoryId:type,
                goodImg:url,
                oldPrice:old_price
            },
            success: function (re) {
                if(!re.status){
                    $.toast("上传成功");
                    window.location.href = '/page/indexPage'
                }else {
                    $.toast(re.msg);
				}
            }
        });
    }

    function uploadImg(data) {
        $.ajax({
            type: 'post',
            url: '/pic/upload',//todo
            dataType: 'json',
            data: data,
            processData: false,
            contentType: false,
            success: function (re) {
                if (!re.status){
                    url +=  re.data+",";
                }
            }
        });
    }

    //价格
    $(document).on('click','.popup-price', function () {
        var yj =$('input[name="yj"]').val();
        var tj =$('input[name="tj"]').val();
        if(yj != ''|| tj != ''){
            if(parseInt(yj) < parseInt(tj)){
                $.toast("特价不能高于原价");
                $('#price').html('￥<div class="item-title"><span id="tj">'+Math.round(yj*100)/100+'</span></div>');
            }else if(yj == ''){
                $('#price').html('￥<div class="item-title"><span id="tj">'+Math.round(tj*100)/100+'</span></div>');
            }else if(tj == ''){
                $('#price').html('￥<div class="item-title"><span id="tj">'+Math.round(yj*100)/100+'</span></div>');
            }else if(yj == tj){
                $('#price').html('￥<div class="item-title"><span id="tj">'+Math.round(tj*100)/100+'</span></div>');
            }else{
                $('#price').html('<div class="item-title">特价:<span id="tj">'+Math.round(tj*100)/100+'</span><span style="padding-left: 0.5rem">原价:<span id="yj">'+Math.round(yj*100)/100+'</span></span></div>');
            }
        }
    });

    //将选择的类别加到page面
    function myType(name,id){
        $('#type').html('<div class="item-title" id="'+id+'">'+name+'</div>');
        initType(id);
    }
    //分类列表
    function initType(id) {
        $.ajax({
            url: '/sys/category/categoryAll',
            type: 'post',
            dataType: 'json',
            success: function (re) {
                var data = re.data;
                if (!re.status) {
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        html += "<li class=\"item-content item-link\">\n" +
                            "						<div class=\"item-media\"><i class=\"icon icon-f7\"></i></div>\n" +
                            "						<div class=\"item-inner close-popup\" onclick='myType(\" "+data[i].categoryName+" \" ,"+data[i].categoryId+")'>\n" +
                            "							<div class=\"item-title\">" + data[i].categoryName + "</div>\n" +
                            "						</div>\n" +
                            "					</li>"
                    }
                    // 添加新条目
                    $('#myType ul').append(html);
                }
            }
        })
    }

</script>

</body>

</html>